<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="../../../../src/css/common/reset.css">
    <link rel="stylesheet" href="../../../../src/css/common/icon.css">

    <link rel="stylesheet" href="../../layout/button/layout.css">
    <link rel="stylesheet" href="../select/com-select.css">
    <link rel="stylesheet" href="../radio/com-radio.css">
    <link rel="stylesheet" href="../check/com-check.css">
    <link rel="stylesheet" href="../../notice/message/com-message.css">
    <style>
        .demo{
            width:800px;
            min-height: 400px;
            margin:0 auto;
            padding:10px;
            border: 1px solid #ebebeb;
        }
        .form{width:450px;}


        .com-radio,.com-check{
            padding:5px 0;
        }


    </style>
</head>
<body>

<div class="demo clearfix feat-grid">

    <!--form-->
    <form class="form mt50">

        <div class="form-item">
            <label class="form-title must">姓名：</label>
            <div class="form-content">
                <input name="name" class="form-input" type="text">
            </div>
        </div>

        <div class="form-item">
            <label class="form-title">年龄：</label>
            <div class="form-content">
                <input name="age" class="form-input" type="text">
            </div>
        </div>

        <div class="form-item">
            <label class="form-title">性别：</label>
            <!-- component -->
            <div class="form-content">
                <section data-name="comRadio" id="radio-1" class="com-radio">
                    <label>
                        <input name="sex" type="radio" value="男">
                        <span data-name="radioBox" class="radio-box"></span>
                        <span>男</span>
                    </label>

                    <label class="ml10">
                        <input name="sex" type="radio" value="女">
                        <span data-name="radioBox" class="radio-box"></span>
                        <span>女</span>
                    </label>
                </section>
            </div>
        </div>

        <div class="form-item">
            <label class="form-title">喜欢：</label>
            <div class="form-content">
                <section data-name="com-check" class="com-check">
                    <label data-name="checkAll">
                        <i data-name="allStyle" class="check-box"></i>
                        <span>全选</span>
                    </label>

                    <label class="ml15">
                        <i data-name="checkStyle" class="check-box"></i>
                        <span>小李</span>
                        <input name="like" type="checkbox" value="小李">
                    </label>

                    <label>
                        <i data-name="checkStyle" class="check-box"></i>
                        <span>小红</span>
                        <input name="like" type="checkbox" value="小红">
                    </label>
                </section>
            </div>
        </div>

        <div class="form-item">
            <label class="form-title">兴趣：</label>
            <div class="form-content">
                <!-- component -->
                <section class="com-select">
                    <label class="sel-item">
                        <input class="sel-head" type="text" readonly UNSELECTABLE="on" placeholder="请选择"/>
                        <input name="interest" type="hidden">
                        <i class="sel-icon"></i>
                    </label>
                    <ul class="sel-content">
                        <li data-val="1" class="sel-list">篮球</li>
                        <li data-val="2" class="sel-list">足球</li>
                        <li data-val="3" class="sel-list">羽毛球</li>
                    </ul>
                </section>
            </div>
        </div>

        <div class="form-item">
            <label class="form-title">留言：</label>
            <div class="form-content">
                <textarea class="form-textarea" rows="2" cols="2" name="message"></textarea>
            </div>
        </div>
    </form>

    <button class="com-btn com-btn-primary sub">提交</button>

</div>

<select name="" id="t">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<script src="../../lib/jquery.js"></script>
<script src="../select/com-select.js"></script>
<script src="../radio/com-radio.js"></script>
<script src="../check/com-check.js"></script>

<script src="../../notice/message/com-message.js"></script>

<script src="../../../../src/js/validate.js"></script>
<script>

    //组件数据渲染
    var data = [
        {val:1,name:'jack'},
        {val:2,name:'lisa'}
    ];

    //实例化组件
    $('.com-select').comSelect();
    $('.com-radio').comRadio();
    $('.com-check').comCheck();

    var form = $('form');
    var validate = {
        rules:{
            name:{required:true,nameRule:true},
            age:{required:true,textRule:false},
            sex:{required:true},
            like:{required:true},
            interest:{required:true},
            message:{required:true}
        },
        prompt:{
            name:{required:'请填写您的称呼',nameRule:'称呼需是2-6位的文字'},
            age:{required:'请输入年龄',textRule:'留言至少5个字符哦'},
            sex:{required:'请选择性别',textRule:false},
            like:{required:'请选择喜欢水果'},
            interest:{required:'请选择爱好'},
            message:{required:'请填写简介信息'}
        }
    };

    window.validateMethod({
        //表单对象
        formObj:form,
        //验证规则
        validate:validate,
        //提交按钮dom
        submit:'.sub',
        //是否开起提示
        prompt:true,
        //提示信息要插入的地方
        promptBox:'',
        //要触发校验的元素(触发的事件类 与存储值的隐藏域)
        evList:[
            {
                key:'.sel-list',
                name:'interest'
            },
            {
                key:'[data-name="checkAll"]',
                name:'like'
            }
        ]

    },function(arr){   //prompt参数【true(验证全部通过后的回调函数) false(返回验证失败的内容数组对象)】
        console.log(form.serialize())
        //alert(123)
        ///form.submit()
    });

</script>
</body>
</html>